<template>
  <div class="other">
    <p class="main_text">店铺装修</p>
  </div>
  <div class="main self_adaption" v-loading="loading" element-loading-text="上传中">
    <div class="self_adaption">
      <div class="main df">
        <div class="left">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <div class="left_r">
              <!-- //////////////////////  首页 ////////////////////////////////// -->
              <!-- <el-tab-pane label="首页" name="first">
                        <div class="demo-collapse">
                            <el-collapse
                                v-model="activeNames"
                                @change="handleChange"
                                style="flex: 1"
                            >
                                <el-collapse-item title="店铺名片展示" name="1">
                                    <el-form :model="shopMes" label-width="90px">
                                        <el-form-item label="店铺名称：">
                                            <el-input
                                                v-model="shopMes.shopName"
                                                disabled
                                                style="width: 45%"
                                            />
                                        </el-form-item>
                                        <el-form-item label="店铺简介：">
                                            <el-input
                                                v-model="shopMes.briefIntroduction"
                                                type="textarea"
                                                disabled
                                                style="width: 70%"
                                            />
                                        </el-form-item>
                                        <el-form-item label="店铺头像：">
                                            <el-avatar
                                                shape="square"
                                                :src="shopMes.shopHead"
                                                :size="120"
                                            />
                                        </el-form-item>
                                    </el-form>
                                </el-collapse-item>
                                <el-collapse-item title="商品列表展示" name="3">
                                    <div class="goods_list">
                                        <div
                                            class="box1"
                                            v-for="(item, index) in shopProduct"
                                            :key="index"
                                            style="margin-left: 20px"
                                        >
                                            <div v-if="item.pics.length != 0">
                                                <img
                                                    :src="item.pics[0].url"
                                                    alt=""
                                                    class="goods_img"
                                                />
                                            </div>
                                            <div v-else>
                                                <img
                                                    :src="item.mainImgUrl"
                                                    alt=""
                                                    class="goods_img"
                                                />
                                            </div>
                                            <div class="goods_name">{{ item.name }}</div>
                                            <div class="goods_price">￥{{ item.salePrice }}</div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse> -->
              <!-- ///////////////////////////// 手机模型 ////////////////////////////////////////// -->
              <!-- <div class="right">
                                <h2 class="tac fwb" style="margin-bottom: 20px">首页</h2>
                                <div class="view">
                                    <div class="title">首页</div>
                                    <div class="shop">
                                        <img :src="shopMes.shopHead" alt="" class="shop_head" />
                                        <div class="shop_mes">
                                            <div class="shop_name">
                                                {{ shopMes.shopName }}
                                                <span class="shop_grade">LV1</span>
                                            </div>
                                            <div class="introduce">
                                                {{ shopMes.briefIntroduction }}
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="categary">
                                        <li>筛选</li>
                                        <li>筛选</li>
                                        <li>筛选</li>
                                        <li>分类</li>
                                    </ul>
                                    <div class="goods">
                                        <div
                                            class="box1"
                                            v-for="(item, index) in shopProduct"
                                            :key="index"
                                        >
                                            <img :src="item.mainImgUrl" alt="" class="goods_img" />
                                            <div class="goods_name">{{ item.name }}</div>
                                            <div class="goods_price">￥{{ item.salePrice }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane> -->
              <!-- //////////////////////  详情页 ////////////////////////////////// -->
              <el-tab-pane label="详情" name="second">
                <div style="display: flex; width: 100%; height: 100%">
                  <div style="display: flex; width: 70%; height: 100%">
                    <!-- /////////////////////////////商品列表 ////////////////////////////////////////// -->
                    <div class="left_left" :style="{ width: `${goodsShow}` }" v-if="goodsShow1">
                      <div>
                        <el-input placeholder="搜索" size="small" class="left_search" v-model="searchGoodsValue" />
                        <button class="solid" @click="searchGoods">搜索</button>
                      </div>

                      <ul class="infinite-list" @scroll="goodsListLoad" ref="container">
                        <li v-for="(item, index) in GoodsList" :key="index" style="padding: 10px 0"
                          class="goods infinite-list-item">
                          <el-radio-group v-model="radio1" class="ml-4" @change="changeGoods(item.id)">
                            <el-radio :label="item.id" size="large" style="margin-top: 30px; width: 100%">
                              <!-- /////////////////////  单个商品信息  ///////////////////// -->
                              <div class="goods1">
                                <div v-if="
                                  item.decoration == null ||
                                  item.decoration.turnImgs == null ||
                                  item.decoration.turnImgs.length == 0
                                ">
                                  <img :src="item.pics[0] ? item.pics[0].url : ''" alt="" style="
                                      width: 70px;
                                      height: 70px;
                                      border-radius: 10px;
                                    " />
                                </div>
                                <div v-else>
                                  <img :src="item.decoration.turnImgs[0]" alt="" style="
                                      width: 70px;
                                      height: 70px;
                                      border-radius: 10px;
                                    " />
                                </div>

                                <div class="right1" style="width: 80%; margin-left: 5px">
                                  <span style="
                                      display: inline-block;
                                      font-size: 14px;
                                      color: #3d3d3d;
                                    ">{{ item.name }}</span>
                                  <div class="center" style="font-size: 12px; color: #86888b">
                                    <el-text v-if="item.status == 0" class="mx-1" type="primary" style="
                                        border-right: 1px solid #d9dada;
                                        padding-right: 3px;
                                      ">
                                      • 未上架</el-text>
                                    <el-text v-else-if="item.status == 1" class="mx-1" type="success" style="
                                        border-right: 1px solid #d9dada;
                                        padding-right: 3px;
                                      ">
                                      • 销售中</el-text>
                                    <el-text v-else-if="item.status == 2" class="mx-1" type="warning" style="
                                        border-right: 1px solid #d9dada;
                                        padding-right: 3px;
                                      ">
                                      • 已下架</el-text>
                                    <el-text v-else-if="item.status == 3" class="mx-1" type="warning" style="
                                        border-right: 1px solid #d9dada;
                                        padding-right: 3px;
                                      ">
                                      • 售罄</el-text>
                                    商品编号：{{ item.productSn }}
                                  </div>
                                  <div>
                                    <el-text v-if="item.decoration == null" class="mx-1" type="warning">
                                      • 未装修</el-text>
                                    <div v-else>
                                      <div v-if="item.decoration == null">
                                        <el-text class="mx-1" type="warning">
                                          • 未装修</el-text>
                                      </div>
                                      <div v-else>
                                        <el-text class="mx-1" type="success">
                                          • 已装修</el-text>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </el-radio>
                          </el-radio-group>
                        </li>

                        <p v-show="noMore" style="
                            font-size: 12px;
                            color: #9e9e9e;
                            text-align: center;
                            margin-top: 20px;
                          ">
                          没有更多了~
                        </p>
                      </ul>
                    </div>
                    <!-- ///////////////////////////// 商品素材 ////////////////////////////////////////// -->
                    <div class="left_right" style="height: 100%">
                      <div>
                        <!-- 商品列表收缩 -->
                        <img src="@/assets/images/收缩.png" alt="" class="shrink" @click="menuShrink" />
                        <el-button size="small" type="primary" @click="addMaterial">添加素材</el-button>
                        <!-- <el-button size="small" plain>...</el-button> -->
                      </div>
                      <div style="height: 90%; overflow-y: scroll">
                        <el-collapse v-model="activeNames" @change="handleChange">
                          <!-- ///////////////////////////// 商品主图 ////////////////////////////////////////// -->
                          <el-collapse-item :title="'商品主图 1/' + mainImgs.length" name="1">
                            <div>
                              <el-button size="small" round type="primary">图片</el-button>
                              <!-- <el-button size="small" round>视频</el-button> -->
                            </div>
                            <!-- 内容 -->
                            <div class="content">
                              <VueDraggableNext v-model="mainImgs" group="people" @end="end"
                                style="display: flex; flex-wrap: wrap" v-show="mainImgs.length !== 0">
                                <div class="photo" v-for="(item, index) in mainImgs" :key="index">
                                  <img class="photo_img" :src="item" />
                                  <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                                    @confirm="mainImgsDel(item)" icon-color="#626AEF" title="是否确认删除?">
                                    <template #reference>
                                      <span class="del" @click="maskBtn1">✖</span>
                                    </template>
                                  </el-popconfirm>
                                </div>
                              </VueDraggableNext>

                              <el-popconfirm width="220" confirm-button-text="是的" cancel-button-text="不"
                                :icon="InfoFilled" icon-color="#626AEF" title="是否从素材库上传?" @confirm="material('Main')"
                                @cancel="locality('Main')">
                                <template #reference>
                                  <div class="upload">
                                    <el-icon>
                                      <Plus />
                                    </el-icon>
                                  </div>
                                </template>
                              </el-popconfirm>
                            </div>
                          </el-collapse-item>
                          <!-- ///////////////////////////// 商品详情图 ////////////////////////////////////////// -->
                          <el-collapse-item :title="'商品详情 1/' + detailImgs.length" name="2">
                            <div>
                              <el-button size="small" round type="primary">图片</el-button>
                              <!-- <el-button size="small" round>视频</el-button> -->
                            </div>
                            <!-- 内容 -->
                            <div class="content">
                              <VueDraggableNext v-model="detailImgs" group="people" @end="end"
                                style="display: flex; flex-wrap: wrap" v-show="detailImgs.length !== 0">
                                <div class="photo" v-for="(item, index) in detailImgs" :key="index">
                                  <img class="photo_img" :src="item" />
                                  <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                                    @confirm="detailImgsDel(item)" icon-color="#626AEF" title="是否确认删除?">
                                    <template #reference>
                                      <span class="del" @click="maskBtn1">✖</span>
                                    </template>
                                  </el-popconfirm>
                                </div>
                              </VueDraggableNext>
                              <el-popconfirm width="220" confirm-button-text="是的" cancel-button-text="不"
                                :icon="InfoFilled" icon-color="#626AEF" title="是否从素材库上传?" @confirm="material('Detail')"
                                @cancel="locality('Detail')">
                                <template #reference>
                                  <div class="upload">
                                    <el-icon>
                                      <Plus />
                                    </el-icon>
                                  </div>
                                </template>
                              </el-popconfirm>
                            </div>
                          </el-collapse-item>
                          <!-- ///////////////////////////// 商品规格 ////////////////////////////////////////// -->
                          <el-collapse-item name="3">
                            <!-- 标题 -->
                            <template #title>
                              <div class="parameter">
                                <span>参数规格</span>
                              </div>
                            </template>
                            <div class="parameter_content" style="display: flex; align-items: center">
                              <div class="input_valye" style="display: flex; align-items: center">
                                <span class="demonstration">商品名称：</span>
                                <el-input type="text" class="input" placeholder="请输入商品名称" v-model="product.name"
                                  style="width: 200px" disabled />
                              </div>
                              <div class="input_valye" style="
                                  margin-left: 20px;
                                  display: flex;
                                  align-items: center;
                                  width: 280px;
                                ">
                                <span class="demonstration" style="display: block; width: 100px">商品分类：</span>
                                <el-tree-select v-model="product.typeId" :data="sort"
                                  :props="{ label: 'name', value: 'id' }" :render-after-expand="false" disabled>
                                  <template #default="{ data: { name } }">{{
                                    name
                                  }}</template>
                                </el-tree-select>
                              </div>
                            </div>
                          </el-collapse-item>
                        </el-collapse>
                      </div>
                    </div>
                  </div>
                  <!-- ///////////////////////////// 手机模型 ////////////////////////////////////////// -->
                  <div class="right">
                    <h2 class="tac fwb" style="margin-bottom: 20px">预览</h2>
                    <div class="view">
                      <!-- 轮播图 -->
                      <el-carousel height="340px" indicator-position="none">
                        <el-carousel-item v-for="(item, index) in mainImgs" :key="index">
                          <img :src="item" style="width: 100%; height: 100%" />
                        </el-carousel-item>
                      </el-carousel>
                      <div class="product">
                        <div class="name">
                          {{ product.name }}
                        </div>
                        <div class="price" style="color: red; font-weight: bold">
                          ￥{{ product.salePrice }}
                        </div>
                        <div style="display: flex">
                          <div class="other1">保证</div>
                          <div class="other1">保证</div>
                          <div class="other1">保证</div>
                          <div class="other1">保证</div>
                        </div>
                      </div>
                      <div class="other">
                        <div class="introduce">选择规格</div>
                        <div class="introduce">OE码</div>
                        <div class="introduce">配件品牌</div>
                        <div class="introduce">仓库地区</div>
                      </div>
                      <div class="detail">
                        <div class="detail_imgs" v-for="(item, index) in detailImgs" :key="index">
                          <img :src="item" class="photos" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </div>
          </el-tabs>
        </div>
        <!-- *******************************************    素材库     ******************************************** -->
        <div class="material" v-if="materialShow">
          <div class="title">
            <div class="left">
              <el-icon>
                <Picture />
              </el-icon>
              <span style="color: #3d3d3d; font-weight: 500">素材库</span>
            </div>
            <span @click="maskBtn1" class="del_tit">✖</span>
          </div>
          <div class="content">
            <div class="describe">
              <div class="left">
                仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M
              </div>
            </div>
            <div class="photo">
              <el-upload action="#" list-type="picture-card" :auto-upload="false" v-model:file-list="fileList"
                :on-change="MaterialFiles" :limit="30">
                <el-icon>
                  <Plus />
                </el-icon>

                <template #file="{ file }">
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span v-if="!disabled" class="el-upload-list__item-delete">
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                          icon-color="#626AEF" title="是否确认删除?" @confirm="materialRemove(file)">
                          <template #reference>
                            <el-icon>
                              <Delete />
                            </el-icon>
                          </template>
                        </el-popconfirm>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload>
            </div>
          </div>
          <div class="footer">
            <div class="btn">
              <el-button class="hollow" @click="maskBtn1">取消</el-button>
              <el-button class="solid" @click="materialImgSure">确认</el-button>
            </div>
          </div>
        </div>
        <!-- 点击从素材库上传，弹框 -->
        <div class="material material2" v-if="materialShow1">
          <div class="title">
            <div class="left">
              <el-icon>
                <Picture />
              </el-icon>
              <span style="color: #3d3d3d; font-weight: 500">素材库</span>
            </div>
            <span @click="maskBtn1" class="del_tit">✖</span>
          </div>
          <div class="content">
            <div class="describe">
              <div class="left">
                仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M
              </div>
              <span style="color: #116cf8">已选{{ checkPhone }}个</span>
            </div>
            <div class="photo" style="margin-top: 20px">
              <el-checkbox-group v-model="checkList" direction="vertical" @change="photoChange">
                <el-checkbox v-for="(item, index) in fileList" :label="item.url" :key="index"
                  style="width: 100px; height: 100px; margin-left: 10px">
                  <img :key="index" :src="item.url" alt="" style="
                      width: 100px;
                      height: 100px;
                      border: 2px solid #f6f6f6;
                    " />
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="footer">
            <div class="btn">
              <el-button class="hollow" @click="maskBtn1">取消</el-button>
              <el-button class="solid" @click="materialSure">确认</el-button>
            </div>
          </div>
        </div>
        <!-- 点击从本地上传，弹框 -->
        <div class="material" v-if="materialShow2">
          <div class="title">
            <div class="left">
              <el-icon>
                <Picture />
              </el-icon>
              <span style="color: #3d3d3d; font-weight: 500">上传图片</span>
            </div>
            <span @click="maskBtn1" class="del_tit">✖</span>
          </div>
          <div class="content">
            <div class="describe">
              <div class="left">
                仅支持JPG、GIF、PNG、JPEG、BMP格式，文件小于4M
              </div>
              <span style="color: #116cf8">已选{{ checkPhone }}个</span>
            </div>
            <div class="photo" style="margin-top: 20px">
              <el-upload action="#" list-type="picture-card" :auto-upload="false" v-model:file-list="fileList1"
                :on-change="GoodsFiles" :limit="30">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible1">
                <img w-full :src="dialogImageUrl1" alt="Preview Image" />
              </el-dialog>
            </div>
          </div>
          <div class="footer">
            <div class="watermarked"></div>
            <div class="btn">
              <el-button class="hollow" @click="maskBtn1">取消</el-button>
              <el-button class="solid" @click="uploadSure">确认</el-button>
            </div>
          </div>
        </div>
      </div>
      <div id="mask1" v-if="mask" @click="maskBtn1"></div>
      <canvas ref="canvas" id="canvas" style="display: none"></canvas>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  Picture as Search,
  Plus,
  Picture,
  InfoFilled,
  Delete,
} from "@element-plus/icons-vue";
import type { TabsPaneContext, UploadFile } from "element-plus";
import { VueDraggableNext } from "vue-draggable-next";
import { ElMessage } from "element-plus";
import {
  RequestGoodsSearch,
  RequestGoodDecoration,
  RequestGoodMainImgs,
  RequestGoodSort,
  RequestGoodDetailImgs,
  RequestGoodMainImgsDel,
  RequestGoodDetailImgsDel,
  RequestGoodMaterialImgs,
  RequestGoodMaterialImgsDel,
  RequestGoodMaterialMainImgs,
  RequestGoodMaterialDetailImgs,
  RequestShopHomepage,
} from "@/api/path/index.js";
const disabled = ref(false);
const checkList = ref([]);
const activeNames = ref(["1"]);
const activeName = ref("second");
const dialogImageUrl1 = ref("");
const dialogVisible1 = ref(false);
const materialShow = ref(false);
const materialShow1 = ref(false);
const materialShow2 = ref(false);
const mask = ref(false);
const radio1 = ref("");
const shopId = Number(localStorage.getItem("ShopId"));
const fileList = ref<any>([]); //商品素材
const fileStorage = ref<any>([]); //商品素材图片临时存储
const mainImgs = ref([]); //商品主图
const detailImgs = ref([]); //商品详情图
const fileList1 = ref<any>([]); //商品上传临时图片存储
const goodsShow = ref("300px");
const product = ref({});
const productId = ref(0);
const MaterialImg = ref<any>([]);
const shopProduct = ref([]); //店铺首页商品

const shopMes = ref({
  shopHead: "",
  shopName: "",
  briefIntroduction: "",
});
onMounted(() => {
  acquireGoods();
  getsort();
});
const searchGoodsValue = ref("");
const searchGoods = async () => {
  page.value = 1;
  const a = await RequestGoodsSearch({
    shopId: shopId,
    page: page.value,
    rows: rows.value,
    name: searchGoodsValue.value,
  });
  if (a.msg == "操作成功！") {
    GoodsList.value = a.resultObj.products;
  }
};
const sort = ref([]); //商品联级选择器
// 获取联级分类
const getsort = async () => {
  const a = await RequestGoodSort();
  sort.value = a.resultObj;
  console.log(a.resultObj);
};
const GoodsList = ref<any>([]);
// 点击添加素材
const addMaterial = () => {
  if (radio1.value === "") {
    ElMessage.error("请先选择要编辑的商品");
  } else {
    materialShow.value = true;
    mask.value = true;
  }
};
const page = ref(1);
const rows = ref(10);
/**
 * 获取商品列表
 */
const allProduct = ref(0);
const acquireGoods = async () => {
  const Goods = await RequestGoodsSearch({
    shopId: shopId,
    page: page.value,
    rows: rows.value,
  });
  GoodsList.value = Goods.resultObj.products;
  allProduct.value = Goods.resultObj.totalCount;
  console.log(GoodsList.value);
  const Shop = await RequestShopHomepage();
  console.log("店铺99999999999999999999999999999999999999999999999999999999", Shop.resultObj);
  shopProduct.value = Shop.resultObj.products;
  shopMes.value = {
    shopHead: Shop.resultObj.shopHead,
    shopName: Shop.resultObj.shop.shopName,
    briefIntroduction: Shop.resultObj.shop.briefIntroduction,
  };
};
const container = ref(null);
const noMore = ref(false);
// 触底刷新
const goodsListLoad = async () => {
  if (
    container.value.scrollTop + container.value.clientHeight >=
    container.value.scrollHeight
  ) {
    if (page.value < Math.ceil(allProduct.value / rows.value)) {
      console.log("到底了");
      page.value++;
      const Goods = await RequestGoodsSearch({
        shopId: shopId,
        page: page.value,
        rows: rows.value,
        keyword: searchGoodsValue.value,
      });
      GoodsList.value = GoodsList.value.concat(Goods.resultObj.products);
    } else {
      noMore.value = true;
    }
  }
};
/**
 * 图片移动后的数组
 */
const end = (event: any) => {
  console.log("end", fileList.value);
};
/* 选项卡 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const handleChange = (val: any) => {
  console.log(val);
};

/**
 * 本地上传到素材中心
 */
const MaterialFiles = (file: any) => {
  MaterialImg.value.push(file);
  console.log("测试", MaterialImg.value);
};
/**
 * 素材中心上传确认
 */

let timer = ref(null); //设置记录时间，用于防抖
const loading = ref(false);
const materialImgSure = async () => {
  if (timer != null) {
    clearTimeout(timer);
  }
  timer = setTimeout(async () => {
    loading.value = true;
    const formimgs = new FormData();
    for (let i = 0; i < MaterialImg.value.length; i++) {
      console.log("加水印试试呢", MaterialImg.value[i]);

      // const a = await watermarked(MaterialImg.value[i]);
      formimgs.append("pics", MaterialImg.value[i].raw);
    }
    console.log("上传图片", MaterialImg.value);

    const blob = new Blob([JSON.stringify(productId.value)], {
      type: "application/json;charset=utf-8",
    });
    formimgs.append("id", blob);
    const a = await RequestGoodMaterialImgs(formimgs);
    if (a.msg == "操作成功！") {
      ElMessage.success("操作成功");
      page.value = 1;
      acquireGoods();
      MaterialImg.value = [];
      loading.value = false;
    } else {
      ElMessage.error("操作失败");
      loading.value = false;
    }
    fileList.value = a.resultObj;
    fileStorage.value = a.resultObj;
    materialShow.value = false;
    mask.value = false;
  }, 500);
};
/**
 * 删除素材中心图片
 */
const beforIndex = ref(0);
const materialRemove = (file: UploadFile) => {
  beforIndex.value = 0;
  console.log("删除", file);
  console.log("删除1111", file.id);
  if (file.id === undefined) {
    for (let i = 0; i < fileList.value.length; i++) {
      if (file.id === undefined) {
        beforIndex.value = i;
      }
      if (fileList.value[i].raw) {
        if (fileList.value[i].raw.uid === file.uid) {
          fileList.value.splice(i, 1);
          MaterialImg.value.splice(i - beforIndex.value, 1);
        }
      } else {
        console.log(456);
      }
    }
  } else {
    console.log(file.id);
    new Promise((resolve, reject) => {
      RequestGoodMaterialImgsDel(file.id)
        .then((res: any) => {
          fileList.value = res.resultObj;
          fileStorage.value = res.resultObj;

          page.value = 1;
          acquireGoods();
        })
        .catch((err: any) => {
          reject(err);
        });
    });
  }
  console.log(fileList.value);
};

// 图片上传
const GoodsFiles = (file: any) => {
  fileList1.value.push(file.raw);
  console.log("测试", fileList1.value);
  checkPhone.value = fileList1.value.length;
};
const differentiate = ref("Main");
/**
 * 本地上传主图，详情图
 */
const locality = (vale: string) => {
  if (radio1.value === "") {
    ElMessage.error("请先选择要编辑的商品");
  } else {
    differentiate.value = vale;
    materialShow2.value = true;
    mask.value = true;
    fileList1.value = [];

    checkPhone.value = 0;
  }
};
/**
 * 素材库上传商品主图
 */
const material = (vale: string) => {
  if (radio1.value === "") {
    ElMessage.error("请先选择要编辑的商品");
  } else {
    differentiate.value = vale;
    materialShow1.value = true;
    mask.value = true;

    checkPhone.value = 0;
  }
};
/**
 * 素材上传商品主图，详情图确认按钮
 */

let timer1 = ref(null); //设置记录时间，用于防抖
const materialSure = async () => {
  if (timer1 != null) {
    clearTimeout(timer1);
  }
  timer1 = setTimeout(async () => {
    loading.value = true;
    // console.log(checkList.value)
    if (differentiate.value === "Main") {
      console.log("主图", differentiate.value);
      const formimgs = new FormData();
      const Imgs = new Blob([JSON.stringify(checkList.value)], {
        type: "application/json;charset=utf-8",
      });
      formimgs.append("mainImgs", Imgs);
      const id = new Blob([JSON.stringify(productId.value)], {
        type: "application/json;charset=utf-8",
      });
      formimgs.append("id", id);
      new Promise((resolve, reject) => {
        RequestGoodMaterialMainImgs(formimgs)
          .then((res: any) => {
            mainImgs.value = res.resultObj;
            materialShow1.value = false;
            mask.value = false;
            checkList.value = [];

            page.value = 1;
            acquireGoods();
            loading.value = false;

            checkPhone.value = 0;
          })
          .catch((err: any) => {
            reject(err);
            loading.value = false;
            checkPhone.value = 0;
          });
      });
    } else {
      console.log("详情", differentiate.value);
      const formimgs = new FormData();
      const Imgs = new Blob([JSON.stringify(checkList.value)], {
        type: "application/json;charset=utf-8",
      });
      formimgs.append("detailImgs", Imgs);
      const id = new Blob([JSON.stringify(productId.value)], {
        type: "application/json;charset=utf-8",
      });
      formimgs.append("id", id);
      new Promise((resolve, reject) => {
        RequestGoodMaterialDetailImgs(formimgs)
          .then((res: any) => {
            detailImgs.value = res.resultObj;
            materialShow1.value = false;
            mask.value = false;
            checkList.value = [];
            loading.value = false;
            checkPhone.value = 0;
            page.value = 1;
            acquireGoods();
          })
          .catch((err: any) => {
            reject(err);
            loading.value = false;
            checkPhone.value = 0;
          });
      });
    }
  }, 500);
};
/**
 * 删除商品主图
 */
const mainImgsDel = (url: string) => {
  const a = {
    url: url,
    id: productId.value,
  };
  new Promise(() => {
    RequestGoodMainImgsDel(a)
      .then((res: any) => {
        console.log("删除成功");
        ElMessage.success("删除成功");
        mainImgs.value = res.resultObj;

        page.value = 1;
        acquireGoods();
      })
      .catch(() => {
        ElMessage.error("删除失败");
      });
  });
};
/**
 * 删除详情图片
 */
const detailImgsDel = (url: string) => {
  const a = {
    url: url,
    id: productId.value,
  };
  new Promise(() => {
    RequestGoodDetailImgsDel(a)
      .then((res: any) => {
        console.log("删除成功");
        ElMessage.success("删除成功");
        detailImgs.value = res.resultObj;
      })
      .catch(() => {
        ElMessage.error("删除失败");
      });
  });
};
/**
 * 商品装修收缩
 */
const goodsShow1 = ref(true);
const menuShrink = () => {
  if (goodsShow.value === "0px") {
    goodsShow.value = "300px";
    goodsShow1.value = true;
  } else {
    goodsShow.value = "0px";
    goodsShow1.value = false;
  }
};
/**
 * 商品选择改变
 */
const changeGoods = async (id: number) => {
  mainImgs.value = [];
  detailImgs.value = [];
  productId.value = id;
  const a = await RequestGoodDecoration(id);
  console.log(a.resultObj);
  fileList.value = a.resultObj.productPics;
  console.log("素材图", fileList.value);

  fileStorage.value = a.resultObj.productPics;
  if (a.resultObj.detailImgs) {
    detailImgs.value = a.resultObj.detailImgs;
  }
  if (a.resultObj.mainImgs) {
    mainImgs.value = a.resultObj.mainImgs;
  }
  product.value = a.resultObj.product;
};
/**
 * 添加水印
 */
const watermarkedImage = ref("");
const canvas = ref<any>(null);
const watermarked = (file: any) => {
  const file1 = file.raw;
  const ctx = canvas.value.getContext("2d");
  const img = new Image();
  const fileReturn = ref<any>();
  // 绘制水印
  img.onload = () => {
    canvas.value.width = img.width;
    canvas.value.height = img.height;
    // 绘制原始图片
    ctx.drawImage(img, 0, 0);
    // 绘制水印
    ctx.font = `${img.width * 0.1}px Arial`;
    ctx.fillStyle = "rgb(0, 0, 0, 0.2)";
    // 获取文字的宽度和高度
    const text = "劣车宝"; //水印默认加店铺的名字
    const textWidth = ctx.measureText(text).width;
    const textHeight = img.width * 0.1; // 根据字体大小设置
    // 计算文字的起始位置
    const x = (img.width - textWidth) / 2; // 水平居中
    const y = (img.height - textHeight) / 2; // 垂直居中
    ctx.fillText(text, x, y);
    // 将canvas转换为DataURL
    const watermarkedDataURL = canvas.value.toDataURL("image/png");
    var arr = watermarkedDataURL.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    var file2 = new File([u8arr], file.raw.name, { type: mime });
    // 更新watermarkedImage
    fileReturn.value = file2;
    watermarkedImage.value = watermarkedDataURL;
  };
  img.src = URL.createObjectURL(file1);
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(fileReturn.value);
    }, 100);
  });
};
/**
 * 主图，详情图，图片本地上传确认按钮
 */

let timer2 = ref(null); //设置记录时间，用于防抖
const uploadSure = async () => {
  if (timer2 != null) {
    clearTimeout(timer2);
  }
  timer2 = setTimeout(async () => {
    loading.value = true;
    if (differentiate.value === "Main") {
      console.log("主图", differentiate.value);
      const formimgs = new FormData();
      for (let i = 0; i < fileList1.value.length; i++) {
        // const a = await watermarked(fileList1.value[i]);
        formimgs.append("mainImgs", fileList1.value[i].raw);
        // console.log("添加水印", fileList1.value[i]);
      }
      const blob = new Blob([JSON.stringify(productId.value)], {
        type: "application/json;charset=utf-8",
      });
      formimgs.append("id", blob);

      const ay = formimgs.getAll("mainImgs");
      console.log("表单", ay);
      const a = await RequestGoodMainImgs(formimgs);
      mainImgs.value = a.resultObj;
      materialShow2.value = false;
      mask.value = false;
      loading.value = false;
      checkPhone.value = 0;
      page.value = 1;
      acquireGoods();
    } else {
      console.log(differentiate.value);
      console.log("详情图", differentiate.value);
      const formimgs = new FormData();
      for (let i = 0; i < fileList1.value.length; i++) {
        // const a = await watermarked(fileList1.value[i]);
        formimgs.append("detailImgs", fileList1.value[i].raw);
        console.log("添加水印", fileList1.value[i].raw);

      }
      const blob = new Blob([JSON.stringify(productId.value)], {
        type: "application/json;charset=utf-8",
      });
      formimgs.append("id", blob);
      const a = await RequestGoodDetailImgs(formimgs);
      detailImgs.value = a.resultObj;
      materialShow2.value = false;
      mask.value = false;
      loading.value = false;
      checkPhone.value = 0;
      page.value = 1;
      acquireGoods();
    }
  }, 500);
};
const checkPhone = ref(0); //已选图片数量
const photoChange = (value: string) => {
  console.log("1111", value);
  checkPhone.value = value.length;
};
/**
 * 遮罩层
 */
const maskBtn1 = () => {
  mask.value = false;
  materialShow.value = false;
  materialShow1.value = false;
  materialShow2.value = false;
  fileList.value = fileStorage.value;
  MaterialImg.value = []; //上传图片的数组置为空
  checkList.value = []; //素材库选择图片的数组置为空
  checkPhone.value = 0;
};
</script>

<style scoped lang="scss">
::v-deep .el-loading-mask {
  position: fixed !important;
}

#mask1 {
  width: 100vw;
  height: 100vh;
  z-index: 50;
  background: rgb(116, 116, 116, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}

.material {
  position: fixed;
  width: 50%;
  height: 50%;
  top: 25%;
  left: 25%;
  background: #fff;
  z-index: 99;
  border-radius: 10px;

  .title {
    width: 100%;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    border-bottom: 2px solid #f4f4f4;
    color: #116cf8;
    padding: 0 30px;

    .left {
      display: flex;
      align-items: center;
      font-size: 16px;

      .el-icon {
        margin-right: 10px;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .content {
    width: 100%;
    height: 75%;
    overflow-y: scroll;
    padding: 20px;

    .describe {
      display: flex;
      justify-content: space-between;

      .left {
        width: 90%;
        color: #cfcfcf;
        font-size: 14px;
      }
    }

    .photo {
      margin-top: 20px;
    }
  }

  .content::-webkit-scrollbar {
    display: none;
  }

  .footer {
    display: flex;
    height: 15%;
    align-items: center;
    border-top: 1px solid #f2f2f2;
    padding: 0 20px;
    position: relative;

    .btn {
      position: absolute;
      right: 20px;
    }
  }
}

.main {
  position: relative;
  width: 100%;
  height: 90%;
  background-color: #fff;

  .left {
    width: 100%;
    height: 100%;

    .el-tabs {
      height: 100%;

      .left_r {
        width: 100%;
        padding: 16px;
        height: 100%;

        .demo-collapse {
          height: 100%;
          display: flex;

          .goods_list {
            width: 80%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
          }
        }

        .left_left {
          height: 100%;
          border-right: 1px solid #ccc;

          .solid {
            height: 24px;
            border-radius: 5px;
            font-size: 12px;
            line-height: 8px;
            margin-left: 10px;
          }

          .left_search {
            width: calc(100% - 80px);
          }

          .infinite-list::-webkit-scrollbar {
            display: none;
          }

          .infinite-list {
            height: 95%;
            overflow-y: scroll;

            .goods {
              width: 100%;

              .goods1 {
                display: flex;
                align-items: center;
                margin-top: 10px;
                text-align: left;
              }
            }
          }
        }

        .left_right {
          margin-left: 10px;
          flex: 1;

          .parameter {
            width: 98%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .parameter_content {
              display: flex;
              align-items: center;
              justify-content: space-evenly;
            }
          }

          .centent {
            margin-top: 10px;
            display: flex;
          }

          .photo {
            width: 100px;
            height: 100px;
            margin-left: 10px;
            margin-top: 10px;
            border-radius: 5px;
            position: relative;

            .photo_img {
              width: 100px;
              height: 100px;
              border-radius: 5px;
              border: 1px solid #f2f2f2;
            }

            .del {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: rgb(0, 0, 0, 0.2);
              text-align: center;
              line-height: 20px;
              position: absolute;
              color: #fff;
              top: -4px;
              left: -7px;
              cursor: pointer;
            }
          }
        }

        .upload {
          width: 100px;
          height: 100px;
          margin-top: 10px;
          margin-left: 10px;
          border: 1px dotted #c9c9c9;
          text-align: center;
          line-height: 100px;
          border-radius: 5px;
        }
      }
    }
  }

  .right {
    min-width: 400px;
    max-width: 400px;
    background-color: #fff;
    padding: 30px;
    border-left: 1px solid #ccc;

    // .view::-webkit-scrollbar{

    // }
    .view {
      width: 100%;
      height: 96%;
      background: #f2f7fc;
      border-radius: 40px;
      overflow-y: scroll;
      border: 1px solid #cee7ff;

      .title {
        text-align: center;
        height: 80px;
        line-height: 80px;
        font-size: 18px;
        font-weight: 500;
      }

      .shop {
        width: 80%;
        border-radius: 20px;
        background: #cee7ff;
        padding: 20px;
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: space-around;

        .shop_head {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }

        .shop_mes {
          .shop_name {
            font-size: 14px;
            color: #2378cf;
            font-weight: bold;

            .shop_grade {
              display: inline-block;
              text-align: center;
              color: #2378cf;
              background: #fff;
              border-radius: 8px;
              font-size: 12px;
              margin-left: 5px;
              padding: 0 3px;
            }
          }

          .introduce {
            width: 130px;
            font-size: 12px;
            color: #7cb3e8;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 5px;
          }
        }
      }

      .categary {
        width: 80%;
        margin: 20px auto;
        height: 30px;
        background: #cee7ff;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        color: #2378cf;
        font-size: 14px;
      }

      .goods {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .view_name {
        width: 100%;
        height: 5.625rem;
        background-color: #cee7ff;
        border-radius: 18px;
        margin-top: 20px;
        padding: 20px;

        .view_name_img {
          width: 3.2rem;
          height: 3.2rem;
          background-color: #fff;
          border-radius: 50%;
        }
      }

      .product {
        width: 90%;
        margin: 10px auto;
        background: #fff;
        padding: 10px;

        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .other1 {
          width: 25%;
          text-align: center;
          color: #86888b;
          font-size: 12px;
        }
      }

      .other {
        width: 90%;
        margin: 10px auto;
        background: #fff;
        padding: 5px 10px;

        .introduce {
          width: 100%;
          height: 25px;
          line-height: 25px;
          color: #333;
          font-size: 12px;
        }
      }

      .detail {
        width: 90%;
        min-height: 500px;
        margin: 10px auto;
        background: #fff;

        .detail_imgs {
          width: 100%;

          .photos {
            width: 100%;
          }
        }
      }
    }
  }

  // 商品列表盒子
  .box1 {
    width: 120px;
    height: 150px;
    margin-top: 10px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #cee7ff;

    .goods_img {
      width: 100%;
      height: 100px;
    }

    .goods_name {
      height: 12px;
      font-size: 12px;
      line-height: 12px;
      color: #2378cf;
      width: 100px;
      margin-top: 5px;
      margin-left: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .goods_price {
      height: 12px;
      font-size: 12px;
      line-height: 12px;
      color: #ff6721;
      margin-top: 5px;
      margin-left: 5px;
    }
  }
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

/* 选项卡左边间距 */
:deep .el-tabs__nav-scroll {
  margin-left: 20px;
}

/* 商品主图---图片 */
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}

.demo-image .block:last-child {
  border-right: none;
}

// ..el-image__inner{

// }
.demo-image .demonstration {
  margin-bottom: 20px;
  font-size: 14px;
  display: inline-block;
  width: 100px;
  color: #333;
}

:deep(.el-upload-list__item-status-label) {
  display: none !important;
}

.material2 :deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}

.material2 :deep(.el-checkbox) {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 30px;
  position: relative;
  margin-left: 0px;
  margin-right: 2px !important;
}

.material2 :deep(.el-checkbox__inner) {
  background: rgb(250, 250, 250, 0.2);
}

.material2 :deep(.el-checkbox__input) {
  position: absolute;
  top: 7px;
  left: 12px;
}

:deep(.el-tabs__content) {
  height: 95% !important;
}

:deep(.el-tab-pane) {
  height: 100%;
}

:deep(.el-carousel--horizontal) {
  height: 340px;
}

:deep(.el-carousel__container) {
  height: 340px;
}

::deep(.el-input--small .el-input__wrapper) {
  padding: 0 !important;
}

::v-deep .el-input--small .el-input__wrapper {
  padding: 0 !important;
}

::deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background: #69acff !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #69acff !important;
}
</style>
